<div class="x-color-picker-portal" (click)="stopPropagation($event)">
  <div #panelRef class="x-color-picker-portal-panel">
    <div #plateRef class="x-color-picker-portal-plate" (click)="plateClick($event)">
      <div class="x-color-picker-portal-white"></div>
      <div class="x-color-picker-portal-black"></div>
      <div
        #dragCom
        class="x-color-picker-portal-cursor"
        [style.left.px]="transform.x"
        [style.top.px]="transform.y"
        cdkDrag
        [cdkDragBoundary]="panelRef"
        (cdkDragStarted)="started()"
        (cdkDragEnded)="ended()"
        (cdkDragMoved)="moved($event)"
      ></div>
    </div>
  </div>
  <div class="x-color-picker-portal-tool">
    <div class="x-color-picker-portal-operations">
      <!-- <x-button icon="fto-edit-2" onlyIcon></x-button> -->
      <div class="x-color-picker-portal-selected">
        <div [style.background-color]="value"></div>
      </div>
      <div class="x-color-picker-portal-area">
        <div class="x-color-picker-portal-slider">
          <x-slider-select
            [(ngModel)]="hsla.h"
            min="0"
            max="360"
            step="1"
            (dragStartEmit)="started()"
            (dragEndEmit)="ended()"
            (ngModelChange)="hueChange()"
          ></x-slider-select>
        </div>
        <div class="x-color-picker-portal-transparent">
          <x-slider-select
            #transparentCom
            [(ngModel)]="hsla.a"
            min="0"
            max="1"
            step="0.01"
            (dragStarted)="started()"
            (dragEnded)="ended()"
            (ngModelChange)="transparentChange()"
          ></x-slider-select>
          <div class="x-color-picker-portal-alpha"></div>
        </div>
      </div>
    </div>
    <div class="x-color-picker-portal-type">
      <x-tabs animated="false" justify="center">
        <x-tab label="HEX">
          <div class="x-color-picker-portal-type-content">
            <x-input [(ngModel)]="hex" (ngModelChange)="hexChange()"></x-input>
          </div>
        </x-tab>
        <x-tab label="RGBA">
          <div class="x-color-picker-portal-type-content">
            <x-input [(ngModel)]="rgba.r" [disabled]="true"></x-input>
            <x-input [(ngModel)]="rgba.g" [disabled]="true"></x-input>
            <x-input [(ngModel)]="rgba.b" [disabled]="true"></x-input>
            <x-input [(ngModel)]="rgba.a" [disabled]="true"></x-input>
          </div>
        </x-tab>
        <x-tab label="HSLA">
          <div class="x-color-picker-portal-type-content">
            <x-input [(ngModel)]="hsla.h" [disabled]="true"></x-input>
            <x-input [(ngModel)]="hsla.sp" [disabled]="true"></x-input>
            <x-input [(ngModel)]="hsla.lp" [disabled]="true"></x-input>
            <x-input [(ngModel)]="hsla.a" [disabled]="true"></x-input>
          </div>
        </x-tab>
      </x-tabs>
    </div>
  </div>
</div>
